<template>
  <view-page>
    <!-- <HeaderView /> -->
    <div class="top">
      <!-- <div class="banner">
        <div class="swiper-content">
          <div class="swiper-inner">

          </div>
        </div>
        <div class="swiper-navigat prev"></div>
        <div class="swiper-navigat next"></div>
      </div> -->
      <div class="swiper-view">
        <div class="spiper-page prev" id="about-swiper-prev-hooks"></div>
        <div class="swiper-container" id="about-list-swiper-hooks">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-item" :class="{active: activeIndexRef === index}" v-for="(item, index) in labs" v-bind:key="item.id">
              <div class="icon">
                <img
                  :src="
                    require(`../About/labicons/${item.icon}${
                      activeIndexRef === index ? '' : '-2'
                    }.png`)
                  "
                />
              </div>
              <div class="title">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="spiper-page next" id="about-swiper-next-hooks"></div>
      </div>
    </div>
    <div class="text-1">
      <div class="text-index active"><span class="index">1</span><p>有机质沉积环境、富集机理与优质烃源岩分布预测技术</p></div>
      <div class="text-index"><span class="index">2</span><p>多类型烃源岩生排烃机理、模式与油气资源类型预测技术</p></div>
      <div class="text-index"><span class="index">3</span><p>复杂油气组分识别、特殊化合物分离与单体同位素实验分析技术</p></div>
      <div class="text-index"><span class="index">4</span><p>元素原位成像、元素与非传统同位素实验分析技术核心问题：油气组分复杂，易挥发轻组分及难流动重组分检测难度大；具有专属生源意义的特征生物标志化合物缺少定
 量分析标准，群体化合物同位素无法满足精细生源解析。
创新成果：开发烃类组分全二维气相色谱分析技术，建立石油样品中不同类型化合物全二维气相图谱库，形成了轻烃全
 组分定量、稠油“UCM”解析方法；开发色谱-质谱、色谱-质谱-质谱分析技术，大幅提高生物标志化合物分析精 
度；建立甾烷、藿烷、金刚烷、烷基苯等生物标志化合物单体分离方法，以及单体生物标志化合物碳同位素
 分析技术，为确定有机质来源和烃源岩形成环境提供可靠依据。
应用实效：首次在塔里木盆地发现不同结构的含硫化合物，特别是系列硫代金刚烷的发现，为深层油气成因判识提供了
 直接证据；在塔里木盆地深层发现超深层轻质油中富含完整的TMAIs系列生物标志化合物，指示下寒武统烃源 
岩形成于硫化厌氧环境；应用生物标志化合物单体碳同位素，准确判识了塔里木、准噶尔盆地多套烃源岩的
 成藏贡献。
3.
特殊生物标志化合物用于塔里木盆地油气源对比 地质历史时期黑色页岩中Mo含量及
同位素演化趋势
单粒菱铁矿多元素成像 全二维分析轻质油全组分 全二维分析稠油”UCM”组成 不同水体锶同位素特征 不同水体锂同位素特征
复杂油气组分识别、特殊化合物分离与单体同位素实验分析技术</p></div>
    </div>

    <div class="split"></div>

    <div class="h1">
      有机质沉积环境、富集机理与优质烃源岩分布预测技术
    </div>

    <div class="text-block">
      <div class="label">核心问题：</div>
      <p class="text">烃源岩形成环境及有机质富集有何差异？优质烃源岩如何预测？</p>
    </div>
    <div class="text-block">
      <div class="label">创新成果：</div>
      <p class="text">有机-无机地球化学研究相结合，对比古老海相烃源岩与中新生界湖相烃源岩中的生烃母质类型及繁盛程度、古水体环境及有机质保存条件等的差异，提出中新元古代具备优质烃源岩形成的大气-海洋环境；探讨地球深部活动、天文轨道力、氧化事件等对海相/陆相有机质富集和烃源岩发育的控制作用；建立不同沉积环境中烃源岩发育模式，预测主要勘探地区有利烃源岩分布。</p>
    </div>
    <div class="text-block">
      <div class="label">应用实效：</div>
      <p class="text">提出寒武-奥陶系塔里木盆地主力油源，为塔里木盆地下古生界油气勘探取得突破提供了理论依据，拓展了我国古老海相油气勘探新领域。深入解剖松辽、鄂尔多斯、柴达木等中新生代盆地烃源岩发育机制，明确成烃潜力，为优质烃源岩分布及页岩油勘探区带优选奠定了理论基础。</p>
    </div>

    <div class="img-list">
      <div class="img-item">
        <div class="img">
          <img src="./images/demo-1.jpg" alt="">
        </div>
        <div class="title">海洋生物碳泵模式图</div>
      </div>
      <div class="img-item">
        <div class="img"><img src="./images/demo-1.jpg" alt=""></div>
        <div class="title">海洋生物碳泵模式图</div>
      </div>
      <div class="img-item">
        <div class="img"><img src="./images/demo-1.jpg" alt=""></div>
        <div class="title">缺氧/含氧环境沉积有机质的生油潜力对比</div>
      </div>
    </div>
    <CardView/>
    <FooterView />
  </view-page>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {isArray} from 'lodash'

// import HeaderView from '@/components/Layout/HeaderView.vue';

import CardView from '@/components/Footer/CardView'
import FooterView from '@/components/Footer/FooterView.vue';
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'

const swiperRef = ref()
const activeIndexRef = ref(0)

const labs = ref([
  { id: 1, icon: '3', name: '国家级', root: true },
  {
    id: 2,
    icon: '国家能源页岩气研发(实验)中心',
    name: ['国家能源', '页岩气研发(实验)中心'],
  },
  { id: 3, icon: '三次采油重点实验室', name: ['三次采油', '重点实验室'] },
  { id: 4, icon: '稠油开采重点实验室', name: ['稠油开采', '重点实验室'] },
  {
    id: 5,
    icon: '国家能源致密油气研发中心',
    name: ['国家能源', '致密油气研发中心'],
  },
  {
    id: 6,
    icon: '提高石油采收率国家重点实验室',
    name: ['提高石油采收率', '国家重点实验室'],
  },
  { id: 7, icon: '采油采气重点实验室', name: ['采油采气', '重点实验室'] },
  { id: 8, icon: '油田化学重点实验室', name: ['油田化学', '重点实验室'] },
  { id: 9, icon: '19', name: '公司级', root: true },
  {
    id: 10,
    icon: '油气地球化学重点实验室',
    name: ['油气地球化学', '重点实验室'],
  },
  { id: 11, icon: '纳米化学重点实验室', name: ['纳米化学', '重点实验室'] },
  { id: 12, icon: '油气藏改造重点实验室', name: ['油气藏改造', '重点实验室'] },
  { id: 13, icon: '油气储层重点实验室', name: ['油气储层', '重点实验室'] },
  {
    id: 14,
    icon: '盆地构造与油气成藏重点实验室',
    name: ['盆地构造与油气成藏', '重点实验室'],
  },
  { id: 15, icon: '非常规油气重点实验室', name: ['非常规油气', '重点实验室'] },
  {
    id: 16,
    icon: '油气地下储库工程重点实验室',
    name: ['油气地下储库工程', '重点实验室'],
  },
  {
    id: 17,
    icon: '碳酸盐岩储层重点实验室',
    name: ['碳酸盐岩储层', '重点实验室'],
  },
  { id: 18, icon: '地球物理重点实验室', name: ['地球物理', '重点实验室'] },
  { id: 19, icon: '物联网重点实验室', name: ['物联网', '重点实验室'] },
  {
    id: 20,
    icon: '二氧化碳捕集、利用与封存重点实验室',
    name: ['二氧化碳捕集、利用与封存', '重点实验室'],
  },
  { id: 21, icon: '测井重点实验室', name: ['测井', '重点实验室'] },
  {
    id: 22,
    icon: '天然气成藏与开发重点实验室',
    name: ['天然气成藏与开发', '重点实验室'],
  },
  { id: 23, icon: '油藏描述重点实验室', name: ['油藏描述', '重点实验室'] },
  {
    id: 24,
    icon: '油层物理与渗流力学重点实验室',
    name: ['油层物理与渗流力学', '重点实验室'],
  },
].map(item => ({...item, name: isArray(item.name) ? item.name.join('') : item.name})))

// const activeData = computed(() => {
//   return labs.value[activeIndexRef.value]
// })

onMounted(() => {
  swiperRef.value = new Swiper('#about-list-swiper-hooks', {
    loop: true,
    slidesPerView: 2, 
    // centeredSlides: true,
    spaceBetween: 0,
    speed: 1200,
    navigation: {
      nextEl: '#about-swiper-next-hooks',
      prevEl: '#about-swiper-prev-hooks',
    },
  })

  swiperRef.value.on('transitionStart', () => {
    const { realIndex } = swiperRef.value

    activeIndexRef.value = realIndex
  })
})

</script>

<style scoped lang="scss">
.top{
  position: relative;
  height: dpi(35rem);
  margin-bottom: dpi(12rem);
  // background: #000;
  background: url('@/assets/images/bg.jpg');
  background-size: cover;
  .banner{
    position: absolute;
    bottom: dpi(-10rem);
    left: 50%;
    margin: 0 auto;
    margin-left: dpi(-35rem);
    width: dpi(70rem);
    height: dpi(19rem);
    background-color: #ffffff;
    box-shadow: 0rem 1rem 3rem 0rem rgba(5, 32, 77, 0.1);
  }
  .swiper-navigat{
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: dpi(4rem);
    height: 100%;
    background: red;
    &.prev{
      left: 0;
    }
    &.next{
      right: 0;
    }
  }
  .swiper-content{
    width: dpi(62rem);
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    background: green;
  }
}

.text-1{
  margin: dpi(4rem);
  margin-top: dpi(16rem);
  padding: dpi(7rem) dpi(3rem) dpi(7rem) dpi(4rem);
  background-color: #f5f5f5;
  .text-index{
    position: relative;
    padding-left: dpi(6rem);
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    line-height: dpi(3rem);
    .index{
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      position: absolute;
      width: dpi(4rem);
      height: dpi(4rem);
      left: 0;
      top: dpi(-0.6rem);
      z-index: 1
    }
    > p {
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    &.active{
      color: #05204d;
      &::after{
        background-color: #0571b0;
      }
    }
    &:not(&.active) {
      color: #888888;
      &::after{
        background-color: #cccccc;
      }
    }
    &:not(&:last-child) {
      margin-bottom: dpi(6rem);
      &::before{
        position: absolute;
        width: 1px;
        background-color:  #dddddd;
        top: dpi(3rem);
        left: dpi(2rem);
        bottom: dpi(-6rem);
        display: block;
        content: '';
      }
    }
    &::after{
      position: absolute;
      width: dpi(4rem);
      height: dpi(4rem);
      border-radius: 50%;
      background-color: #0571b0;
      left: 0;
      top: dpi(-0.6rem);
      display: block;
      content: '';
    }
  }
}
.split{
  margin-left: dpi(4rem);
  margin-bottom: dpi(4rem);
  height: 1px;
  background-color: #05204d;
}

.h1{
  font-family: PingFangSC-Semibold;
  font-size: dpi(4rem);
  line-height: dpi(6rem);
  color: #05204d;
  padding: 0 dpi(7rem) 0 dpi(4rem);
  // margin-bottom: dpi(1rem);
}

.text-block{
  padding-bottom: dpi(5rem);
  padding-top: dpi(5rem);
  margin-left: dpi(4rem);
  margin-right: dpi(4rem);
  border-bottom: 1px solid #dddddd;
  .label {
    font-family: PingFangSC-Semibold;
    font-size: dpi(2rem);
    line-height: dpi(3rem);
    color: #0571b0;
  }
  .text{
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    line-height: dpi(5rem);
    color: #05204d;
  }
}
/** 图文列表 */
.img-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: dpi(2rem);
  margin: dpi(5rem) dpi(4rem);
  .img-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    .img{
      display: flex;
      align-items: center;
      width: 100%;
      height: dpi(24rem);
      // background-color: #05204d;
      border-radius: 1rem;
      > img{
        height: 100%;
        border-radius: dpi(1rem);
        // width: 100%;
      }
    }
    .title{
      width: dpi(28rem);
      margin-top: dpi(2rem);
      margin-bottom: dpi(2rem);
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      line-height: dpi(3rem);
      text-align: center;
      color: #05204d;
    }
  }
}

.swiper-view{
  position: absolute;
  display: flex;
  top: dpi(28rem);
  left: dpi(4rem);
  right: dpi(4rem);
  height: dpi(19rem);
  background-color: #ffffff;
  box-shadow: 0rem dpi(1rem) dpi(3rem) 0rem rgba(5, 32, 77, 0.1);
  .spiper-page{
    display: flex;
    align-items: center;
    justify-content: center;
    width: dpi(4rem);
    height: 100%;
    cursor: pointer;
    font-family: swiper-icons;
    font-size: dpi(3rem);
    color: #0571b0;
    &.next{
      right: 0;
      &::after{
        content: 'next';
      }
    }
    &.prev {
      left: 0;
      &::after{
        content: 'prev';
      }
    }
  }
  .swiper-container{
    flex: 1;
    overflow: hidden;
    .swiper-wrapper{
      min-width: 100%;
    }
  }
  .swiper-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(127, 207, 226, 0.05);
    // background: red;
    &.active{
      background-color: rgba(5, 113, 176, 0.05);
    }
    .title{
      font-family: PingFangSC-Semibold;
      font-size: dpi(2rem);
      color: #05204d;
    }
    .icon {
      margin-bottom: dpi(2rem);
      min-width: dpi(6rem);
      height: dpi(6rem);
      // background: red;
      border-radius: 50%;
      > img{
        height: 100%;
      }
    }
  }
  // .swiper-item{
  //   width: 345px;
  // }
}
</style>